<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="js/vue.js"></script>
    </head>
    <body>
    <div id="app">
        {{user.name}}
        <br>
        <input type="text" v-model="user.name">
        <br>

     </div>
<script>

    new Vue({
        el:"#app",
        data:{
            msg:"666",
            user:{
                name:"张三",
                age:"6"
            },
            list1:["a","b","c"],
            list2:[
                {
                    name:"",
                    age:""
                }
            ]
        },
        watch:{
            msg(newValue,oldValue){
                console.log(newValue,oldValue)
            },
            // user(newValue,oldValue){
            //     console.log(newValue,oldValue)
            // }
            user:{
                deep:true,
                handler(){
                 console.log(this.user);
                }
            },
            list1(newValue,oldValue){

            }
        },
        methods:{

        },
        created(){

        }
    })
</script>
</body>
</html>